<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="../node_modules/bootstrap-3.3.7/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
[v-cloak]{display: none;}

</style>
</head>
<body>
<div id="app" v-cloak>
	<div :class="className1"></div>
	<ul>
		<li v-for="a in list">{{a}}</li>
	</ul>
	<input type="text" v-model="n">+<input type="text" v-model="m" />=<input type="text" v-model="x"/>
	<div style="width:100px;height:100px; background: #FF9900;" v-if="daxiao()"></div>
</div>

<script src="../node_modules/vue/dist/vue.js" type="text/javascript"></script>
<script src="../node_modules/vue-router/dist/vue-router.js" type="text/javascript"></script>
<script src="../node_modules/axios/dist/axios.js"></script>
<script type="text/javascript">
	let vm = new Vue({
		el:'#app',
		data:{  //放数据
			className1:"box",
			list:["js","css","html"],
			n:10,
			m:15,
			flag:true
		},
		created(){ //初始化数据
			this.daxiao()
		},
		template:``,  //如果有template属性会用模板替换掉外部html，只要有此属性app中的内容就没有任何意义了，只能有一个根元素，不能是文本节点
		mounted(){  //挂载，真实dom渲染完了，可以操作dom了
	 
		},
		components:{  //组件属性传递
			
		},
		directives:{  //自定义指令
			
		},
		computed:{  //计算属性,当一个值是依赖别的值变化而改变
			x:{
				get(){
					return Number(this.n)+Number(this.m);
				}
			}
		},
		filters:{  //可以自定义过滤器

		},
		
		methods:{  //放方法
			daxiao(){//根据浏览器大小设置dom元素是否显示，但不是自动的，需要刷新
				let dod = document.body.clientWidth;
				console.log(dod);
				if(dod>=1000){
					return this.flag = true;
				}else{
					return this.flag = false;
				}
			}
		},
		watch:{  //监听，处理异步操作
		}
		
	})

</script>
</body>
</html>
